<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="油站编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-model="code_id" @input="inputCode"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24" >
            <a-form-item
              label="城市"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-select placeholder="请选择" v-model="selectCity" @change="changeCity">
                <a-select-option :value="item" v-for="item in cityList" :key="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24" >
            <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="submitSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </span>
          </a-col>
        </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <div class="operator">
        <a-button @click="addNew" type="primary">新建</a-button>
      </div>
      <standard-table
        :rowKey="(record, index) => index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="discount" slot-scope="item">
          <a>{{ (Number(item.text.nation_price) - Number(item.text.now_price)) | toFixed }}元</a>
        </template>
        <template slot="action" slot-scope="item">
          <a-button type="primary" @click="handleEdit(item)">编辑</a-button>
        </template>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
import { mapMutations } from 'vuex'
import StandardTable from '@/components/table/StandardTable'
import * as Api from '@/services/index'

const columns = [
  {
    title: '编号',
    dataIndex: 'code_id'
  },
  {
    title: '油站名称',
    dataIndex: 'title'
  },
  {
    title: '国标价',
    dataIndex: 'nation_price'
  },
  {
    title: '油原价',
    dataIndex: 'original_price'
  },
  {
    title: '优惠价',
    dataIndex: 'now_price'
  },
  {
    title: '优惠金额',
    scopedSlots: { customRender: 'discount' }
  },
  // {
  //   title: '省份',
  //   dataIndex: 'callNo',
  //   sorter: true,
  //   needTotal: true,
  // },
  {
    title: '城市',
    dataIndex: 'city'
  },
  // {
  //   title: '地区',
  //   dataIndex: 'area'
  // },
  {
    title: '地址',
    dataIndex: 'address',
    width: 150
  },
  // {
  //   title: '经度',
  //   dataIndex: 'longitude'
  // },
  // {
  //   title: '纬度',
  //   dataIndex: 'latitude'
  // },
  {
    title: '所售油品',
    dataIndex: 'sell_type'
  },
  // {
  //   title: '电话',
  //   dataIndex: 'tel'
  // },
  // {
  //   title: '营业起始时间',
  //   dataIndex: 'no'
  // },
  // {
  //   title: '营业截止时间',
  //   dataIndex: 'no'
  // },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]


export default {
  name: 'QueryList',
  components: {StandardTable},
  data () {
    return {
      code_id: '',
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: { 
        pageSize: 10, 
        total: 1,
        current: 1,
      },
      cityList: [],
      selectCity: '',
      isSearch: false
    }
  },
  authorize: {
    deleteRecord: 'delete'
  },
  created() {
    this.getCityList()
    this.getStationList()
  },
  methods: {
    ...mapMutations('account', 
      ['setStationData']
    ),
    initPage() {
      this.pagination = { 
        pageSize: 10, 
        total: 1,
        current: 1,
      }
      this.isSearch = false
    },
    // 表格
    getStationList() {
      Api.StationList({page: this.pagination.current}).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 分页
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.isSearch ? this.getSearchList() : this.getStationList()
    },
    // 选择城市
    changeCity() {
      this.code_id = ''
    },
    inputCode() {
      this.selectCity = ''
    },
    // 搜索
    submitSearch() {
      this.initPage()
      if (!this.code_id && !this.selectCity) {
        this.getStationList()
      } else {
        this.isSearch = true
        this.getSearchList()
      }
    },
    getSearchList() {
      let params = {
        code_id: this.code_id,
        city: this.selectCity,
        page: this.pagination.current
      }
      Api.StationSearch(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 重置搜索参数
    reset() {
      this.code_id = ''
      this.selectCity = ''
    },
    getCityList() {
      Api.CityList().then(res => {
        this.cityList = res.data
      })
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    addNew () {
      this.setStationData({})
      this.$router.push('/stationlistdetail')
    },
    handleEdit(item) {
      this.setStationData(item.record)
      this.$router.push('/stationlistdetail')
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    // margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
